<template>
  <b-container fluid>
    <b-row>
      <b-button size="sm" @click="submit" class="ml-3 mb-2">提交</b-button>
    </b-row>
    <b-row cols="12">
      <b-col>
        <b-card style="height: 740px; overflow-y: scroll">
          <b-container>
            <b-form>
              <b-form-group label="商品名称">
                <b-form-input v-model="form.name"></b-form-input>
              </b-form-group>
              <b-form-group label="商品价格">
                <b-form-input v-model="form.price"></b-form-input>
              </b-form-group>
              <b-form-group label="规格选项">
                <haier-tags v-model="form.options" @on-change="onTagsChange">
                </haier-tags>
              </b-form-group>
              <b-form-group label="相关标签">
                <haier-select-tag
                  v-model="form.tags"
                  v-mapping:mapping="mTags"
                  :options="mTags"
                >
                </haier-select-tag>
                <!-- <b-form-tags v-model="form.tags"></b-form-tags> -->
              </b-form-group>
            </b-form>
            <b-form-group label="尺寸图">
              <haier-file v-model="file.sizeImages"></haier-file>
            </b-form-group>
            <b-form-group label="外观">
              <haier-file v-model="file.appearanceImages"></haier-file>
            </b-form-group>
            <b-form-group label="介绍图">
              <haier-file v-model="file.introduceImages"></haier-file>
            </b-form-group>
            <b-form-group label="说明文件">
              <haier-file v-model="file.helpFile"></haier-file>
            </b-form-group>
            <b-form-group label="描述">
              <b-form-textarea
                placeholder="输入产品描述信息, 支持html"
              ></b-form-textarea>
            </b-form-group>
          </b-container>
        </b-card>
      </b-col>
      <b-col>
        <b-textarea disabled v-model="formJson" rows="30"></b-textarea>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import Tags from "@/components/Tags.vue";
import FormFile from "@/components/File.vue";
import SelectTag from "@/components/SelectTag.vue";

export default {
  data() {
    return {
      form: {
        name: "",
        price: "",
        topic: "",
        tags: [],
        description: "",
        options: [],
        sizeImages: [],
        appearanceImages: [],
        introduceImages: [],
        helpFile: [],
      },
      file: {
        sizeImages: [],
        appearanceImages: [],
        introduceImages: [],
        helpFile: [],
      },
      formJson: "",
      mTags: [],
      mapping: {
        value: "id",
        text: "name",
      },
    };
  },
  watch: {
    form: {
      handler(val) {
        this.formJson = JSON.stringify(val, null, 4);
      },
      deep: true,
    },
    file: {
      handler() {
        for (const [key, values] of Object.entries(this.file)) {
          this.form[key] = values.map((file) => {
            return {
              path: "/",
              fileName: file.name,
            };
          });
        }
      },
      deep: true,
    },
    formJson: function () {
      this.form = JSON.parse(this.formJson);
    },
  },
  methods: {
    submit() {
      var { name } = this.form;
      if (!name || name.length == 0) return;
      var uploadPath = `commodity/${this.$md5(this.form.name)}`;
      this.$haier
        .upload("admin/assets", Object.assign({ path: uploadPath }, this.file))
        .then(({ data }) => {
          var formFiles = Object.keys(this.file)
            .filter((key) => this.form[key] instanceof Array)
            .map((key) => this.form[key]);
          Array.from(data).forEach(({ originName, saveName }) => {
            formFiles.forEach((arr) =>
              arr.forEach((item) => {
                if (item.fileName !== originName) return;
                Object.assign(item, { path: uploadPath, fileName: saveName });
              })
            );
          });
        })
        .then(() => {
          this.$haier.post("admin/commodity", this.form).then((res) => {
            console.log(res);
          });
        });
    },
    loadTags() {
      this.$haier.get("openapi/list/tag").then(({ data }) => {
        this.mTags = data;
        console.log(data);
      });
    },
    onTagsChange(values) {
      console.log(values);
    },
  },
  components: {
    "haier-tags": Tags,
    "haier-file": FormFile,
    "haier-select-tag": SelectTag,
  },
  created() {
    this.loadTags();
    this.form.topic = this.$route.params.id;
  },
};
</script>

<style scoped></style>
